<button nz-button nzType="primary" (click)="createModal()">
    <span>String</span>
</button>

<button nz-button nzType="primary" (click)="createTplModal(tplTitle, tplContent, tplFooter)">
    <span>Template</span>
</button>
<ng-template #tplTitle>
    <span>Title Template</span>
</ng-template>
<ng-template #tplContent let-params>
    <p>some contents...</p>
    <p>some contents...</p>
    <p>{{ params|json }}</p>
</ng-template>
<ng-template #tplFooter let-ref="modalRef">
    <button nz-button (click)="ref.destroy()">Destroy</button>
    <button nz-button nzType="primary" (click)="destroyTplModal(ref)" [nzLoading]="tplModalButtonLoading">
        Close after submit
    </button>
</ng-template>


<br />
<br />

<button nz-button nzType="primary" (click)="createComponentModal()">
    <span>Use Component</span>
</button>

<button nz-button nzType="primary" (click)="createCustomButtonModal()">Custom Button</button>

<br />
<br />

<button nz-button nzType="primary" (click)="openAndCloseAll()">Open more modals then close all after 2s</button>
<br />
<br />
<button nz-button nzType="primary" (click)="modifyData()">modify cnt</button>

<div>
    <button nz-button nzType="primary" (click)="showModal()">弹出详情</button>
</div>
<div>
    <nz-modal [(nzVisible)]="isVisible" nzTitle="详情数据" nzOkText="确定" nzCancelText="取消" (nzOnOk)="handleOk()"
        (nzOnCancel)="handleCancel()">
        <ng-container *nzModalContent>
            <div>{{this.modalData|json}}</div>
        </ng-container>
    </nz-modal>

</div>